<template>
    <xy-general-panel>
        <!--左侧边栏-->
        <template #leftSide>
            <xy-view-widget-tree ref="viewTree"
                                 :checkStrictly="true"
                                 :viewWidget="viewWidget"
                                 @checkChange="treeCheckHandle"></xy-view-widget-tree>
        </template>
        <!--工具栏-->
        <template #toolbar>

            <el-button icon="el-icon-plus" @click="addHandle" type="primary">添加</el-button>
            <div style="float: right">
                <el-dropdown @command="moreOperateHandle">
                          <span class="el-dropdown-link">
                            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="delete">删除模块</el-dropdown-item>
                        <el-dropdown-item>...</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </template>
        <xy-collapse-search-bar>
            <!--filter-->
            <xy-view-widget-table-toolbar :viewWidgets="viewWidget"
                                          @searchSubmit="searchSubmit"></xy-view-widget-table-toolbar>
        </xy-collapse-search-bar>
        <!--table-->
        <xy-view-widget-table ref="viewWidgetTable" :viewWidget="viewWidget"
                              @onEdit="editHandle"></xy-view-widget-table>
        <!--dialog-->
        <el-dialog :title="formTitle" :visible.sync="formDialogVisible">
            <xy-view-widget-form ref="form" :method="formMethod" :entity="formEntity" :version="formVersion"
                                 :viewWidget="viewWidget" @submitSuccess="submitSuccess">
            </xy-view-widget-form>
        </el-dialog>
    </xy-general-panel>

</template>

<script>
    import xyViewWidgetTree from './ViewWidgetTree.vue';
    import xyViewWidgetTable from './ViewWidgetTable.vue';
    import xyViewWidgetTableToolbar from './ViewWidgetTableToolbar.vue';
    import xyViewWidgetForm from './ViewWidgetForm.vue';
    import xyViewWidgetSceneSelect from './select/ViewWidgetSceneSelect.vue';

    export default {
        name: "viewWidgetScene",
        mounted() {
            this.loadData();
        },
        components: {
            xyViewWidgetTree,
            xyViewWidgetTable,
            xyViewWidgetTableToolbar,
            xyViewWidgetForm,
            xyViewWidgetSceneSelect
        },
        computed: {
            formTitle: function () {
                if (this.formMethod === 'POST') {
                    return "添加模块";
                }
                return "修改模块";
            }
        },
        props: {
            viewWidget: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                filter: {
                    unitName: undefined,
                    type: undefined,
                    scene: this.viewWidget,
                    roles: undefined,
                    enabled: undefined
                },
                treeCheckObj: undefined,
                formDialogVisible: false,
                formEntity: {},
                formMethod: 'POST',
                formVersion: undefined
            };
        },

        methods: {
            /**
             * 更多操作
             */
            moreOperateHandle: function (cmd) {
                if (cmd === 'delete') {
                    this.deleteHandle();
                }
            },
            /**
             * 刷新主页
             */
            indexPanelRefresh: function () {
                this.viewWidgetTableRefresh();
                this.viewWidgetTreeRefresh();
                this.formDialogVisible = false;
                this.treeCheckObj = undefined;
            },
            /**
             *  模块列表刷新
             */
            viewWidgetTableRefresh: function () {
                this.$refs.viewWidgetTable.loadData(this.filter);
            },
            /**
             * 树刷新
             */
            viewWidgetTreeRefresh: function () {
                this.$refs.viewTree.loadData(this.filter);
            },
            /**
             * 树选择事件
             */
            treeCheckHandle: function (checkedVal, checkedObj) {
                this.treeCheckObj = checkedObj;
            },
            /**
             * 获取选中的树节点
             */
            getTreeNode: function () {
                if (!this.treeCheckObj || !this.treeCheckObj.checkedNodes || this.treeCheckObj.checkedNodes.length === 0) {
                    return null;
                }
                if (this.treeCheckObj.checkedNodes.length > 1) {
                    return this.treeCheckObj.checkedNodes;
                }
                return this.treeCheckObj.checkedNodes[0];
            },
            /**
             *  添加模块
             */
            addHandle: function () {
                let _parent = this.getTreeNode();
                if (_parent instanceof Array) {
                    this.$message.info('只能选择一个节点！');
                    return;
                }
                this.formEntity = {
                    id: null,
                    parent: _parent || {}
                };
                this.formVersion = 'add';
                this.formMethod = 'POST';
                this.formDialogVisible = true;
            },
            /**
             *  模块编辑：根据table点击来编辑
             */
            editHandle: function (row) {
                this.formVersion = Math.uuid();
                this.formMethod = 'PUT';
                this.formEntity = {
                    id: row.id,
                    parent: {}
                };
                this.formDialogVisible = true;
            },

            /**
             * 删除
             */
            deleteHandle: function () {
                let node = this.getTreeNode();
                if (!node) {
                    this.$message.info('请选择左边的一个节点！');
                    return;
                }
                if (node instanceof Array) {
                    this.$message.info('只能选择一个节点！');
                    return;
                }

                this.$confirm('您真的删除这【' + node.name + '】个模块吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.delete('auth/view_widget/sync', {
                        data: {
                            ids: [node.id]
                        }
                    }).then(res => {
                        if (res.code !== "ok") {
                            this.$message.error(res.msg);
                        } else {
                            this.indexPanelRefresh();
                        }
                    });
                }).catch(() => {
                });

            },
            /**
             * 表单提交成功,刷新列表，树
             */
            submitSuccess: function () {
                this.indexPanelRefresh();
            },
            /**
             * 查询提交
             */
            searchSubmit: function (data) {
                this.filter = data;
                this.viewWidgetTableRefresh();
            },
            loadData() {
                this.searchSubmit({'scene': this.viewWidget});
            }
        },
        watch: {}
    }
</script>

<style scoped>

</style>